<template>
    <div class="content">
        <div class="tableBox">
            <div class="table-title">
                <div class="btnPosition">
                    <el-button @click="goToAddConpany">添加</el-button>
                </div>
            </div>

            <el-table :data="dataApply" style="width: 100%">
                <el-table-column type="expand" label="展开">
                    <template scope="props">
                        <revisions :scope="props" @deleteApp="deleteApp"></revisions>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="sAppName" align="center" min-width="120"></el-table-column>
                <el-table-column label="当前版本" prop="sVersion" align="center" min-width="80"></el-table-column>
                <el-table-column label="上线时间" prop="sOnLineTime" align="center" min-width="100"></el-table-column>
                <el-table-column label="最小版本" prop="sMinVersion" align="center" min-width="80"></el-table-column>
                <el-table-column label="地址" align="center" min-width="280">
                    <template scope="scope">                    
                        <span>{{scope.row.sUrl || '--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" min-width="120">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="checkDes(scope.row.sDesc)">查看描述</el-button>           
                        <el-button type="text" class="btn-success" v-if="scope.row.sState=='1'" @click="modify(scope.row.pId,scope.row.sVersion,scope.row.sOnlineTime,scope.row.sMinVersion,scope.row.sDesc)">修改</el-button>
                        <el-button type="text" class="btn-success" v-if="scope.row.sState=='1'" @click="release(scope.row.pId)">发布</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="查看描述信息" :visible.sync="dialogFormVisible" size="tiny">
            <div class='describe'>
                <span v-html="describe"></span>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible=false">确定</el-button>
            </div>
        </el-dialog>
        <addVersion :version="version" v-if="version.dialogAddVersion" @success="success"></addVersion>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {getAllAppList, publishAppVersion} from 'api/versionMagement';
import revisions from './revisions';
import addVersion from './addVersion';
export default{
    components: {TableLayout, revisions, addVersion},
    data() {
        return {
            formInline: {},
            dataApply: [],
            describe: '',
            dialogFormVisible: false,
            version: {
                dialogAddVersion: false,
                currVesion: '',
                updateDate: '',
                sMinVersion: '',
                sDesc: '',
                isAddVersion: false,
                pId: '',
                sName: ''
            },
            loading: false
        }
    },
    // 初始化
    created() {
        this.getList();
    },
    filters: {
        filterCreateTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            }
        },
        filterLastTime(val) {
            if (val) {
                return val.substr(0, val.length-2) 
            } else {
                return '--'
            }
        }
    },
    methods: {
        // 添加修改成功
        success() {
            this.getList();
        },
        deleteApp() {
            this.getList();
        },
        getList() {
            getAllAppList().then(res => {
                this.dataApply = res.data.content;
            })
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            query(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId,
            this.formInline.schoolId, this.formInline.parentName, this.formInline.EId, this.formInline.loginNum).then(response => {              
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;    
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.data.errorMsg
                    })
                }
            });
        },

        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },

        checkDes(des) {
            this.dialogFormVisible = true;
            this.describe = des.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
        },

        // 添加
        goToAddConpany() {
            this.version.sName = '';
            this.version.currVesion = '';
            this.version.updateDate = '';
            this.version.sMinVersion = '';
            this.version.sDesc = '';
            this.version.isAddVersion = true;
            this.version.dialogAddVersion = true;
        },
        // 修改
        modify(id, currVesion, updateDate, sMinVersion, sDesc) {
            // console.log(id, currVesion, updateDate, sMinVersion, sDesc)
            this.version.currVesion = currVesion;
            this.version.updateDate = new Date(updateDate);
            this.version.sMinVersion = sMinVersion;
            this.version.sDesc = sDesc;
            this.version.isAddVersion = false;
            this.version.pId = id;
            this.version.dialogAddVersion = true;
        },
        // 发布
        release(id) {
            this.$confirm('确定要发布该版本吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                publishAppVersion(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '发布版本成功'
                    });
                    this.getList();
                }) 
            }).catch(() => {
                this.$message.info('已取消');
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .table-title {
        color: #333;
        font-size: 18px;
        padding: 13px 0;
        background: $bgcolor;
        position: relative;
    }
    .tableBox{
        position: relative;
        margin: 0 2px 2px;
        padding: 0 20px 20px;
        background: #fff;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .dialogTable{
        text-align:center;
        margin-left:50px;
        margin-top:30px;
        th{
            background:#f3f3f3;
        }
        th,td{
            text-align:center;
            padding:0 20px;
            width:220px;
            height:40px;
        }
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialog-footer{
        .el-button{
            margin: 20px 0 10px 0;
        }
        text-align: center;
    }
    .largeDialog{
        left: 16% !important;
        width: 80% !important;
    }
    .el-dialog__header{
        text-align:center;
    }
    .describe{
        line-height:24px;
        margin: 40px 70px 50px;
        word-wrap:break-word;
    }
}
</style> 